<template>
  <div class="container">
    <div>设置（相关上传和处理有关的配置）速度，精度，粒度等</div>

    <div class="slider-container">
      <div class="slider-wrap">
        <div class="text">
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            "
          >
            <div>基础步长</div>
            <el-tooltip
              class="box-item"
              style="font-size: 20px"
              effect="dark"
              content="值为0: step实际值为视频的fps。（推荐取值为“fps”）
               此外，取值过大可能造成, 处理精度下降，容易错过一些关键帧。
               取值过小，可能导致速度过慢。"
              placement="top-start"
            >
              <el-button class="tip-button">(提示)</el-button>
            </el-tooltip>
          </div>
        </div>
        <el-slider
          class="slider slider1"
          v-model="setting.step"
          :format-tooltip="formatStepTooltip"
          :marks="marks.step"
          show-input
          max="100"
          size="large"
        />
      </div>
      <div class="slider-wrap">
        <div class="text">
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            "
          >
            <div>加速倍数</div>
            <el-tooltip
              class="box-item"
              style="font-size: 20px"
              effect="dark"
              content='实际的处理步长为：基础步长 * 加速倍数。若基础步长为“fps”，则相当于间隔“加速倍数”秒采集一次视频帧。'

              placement="top-start"
            >
              <el-button class="tip-button">(提示)</el-button>
            </el-tooltip>
          </div>
        </div>
        <el-slider
          class="slider slider1"
          v-model="setting.speed"
          :max="10"
          :min="0.1"
          :step="0.1"
          :format-tooltip="formatSpeedTooltip"
          show-input
          size="large"
        />
      </div>
      <!-- <div class="slider-wrap">
                <div class="text">真实步长为: {{speed * step}}</div>
            </div> -->
      <div class="slider-wrap">
        <div class="text">处理精度</div>
        <el-slider
          class="slider slider2"
          v-model="proces_accuracy"
         show-input
          size="large"
        />
      </div>
      <div class="slider-wrap">
        <div class="text">搜索精度</div>
        <el-slider
          class="slider slider3"
          v-model="search_accuracy"
         show-input
          size="large"
        />
      </div>
      <div class="slider-wrap">
        <div class="text">性能</div>
        <el-slider
          class="slider slider4"
          v-model="performance"
         show-input
          size="large"
        />
      </div>
      <div class="slider-wrap">
        <div class="text">GPU加速</div>
        <el-switch
          v-model="useGPU"
          active-color="#13ce66"
          inline-prompt
          active-text="是"
          inactive-text="否"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onUnmounted, reactive, ref } from "vue-demi";
import { VSConfig } from "../../../config/setting";
import store from "../../../store";
const setting = store.state.user.setting;
const speed = ref(setting.speed)
const performance = ref(90);
const search_accuracy = ref(50);
const useGPU = ref(true);
const proces_accuracy = ref(70);
const marks = {
  step: reactive({
    0: {
      style: {
        color: "#e66533",
      },
      label: "fps",
    },
    // 8: "8°C",
    // 37: "37°C",
    // 50: {
    //   style: {
    //     color: "#1989FA",
    //   },
    //   label: "50%",
    // },
  })
};

function formatStepTooltip(value) {
  if (value == 0) {
    setting.step = 'fps'
    return "fps";
  }
}

// function formatSpeedTooltip(value) {
//     setting.speed = value / 10
//     return setting.speed
// }
onUnmounted(async () => await VSConfig.sync_push_local_config())

</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 800px;
  align-items: center;
}

.slider-container {
  margin: 10px;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.slider-wrap {
  margin: 20px;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.text {
  width: 140px;
}

.tip-button {
  color: #9f2d2d;
  background-color: #ffffff;
  border: #9f2d2d 1px solid;
  font-size: 10px;
  width: 10px;
  height: 7px;
  margin: 0 3px;
}
</style>